<script>
import {changeInterviewStatus, getInterviewDetail} from "@/api/Interview";

export default {
  name: 'ArticleDetail',
  data() {
    return {
      detail: {},
      likeStatus: 0,
      collectStatus: 0,
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    getDetail() {
      console.log(this.$route.query.id)
      return getInterviewDetail({id: this.$route.query.id})
    },
    async likeCollectHandler(type) {
      if (type === 1) {
        this.likeStatus = !this.likeStatus
        await changeInterviewStatus({
          id: this.$route.query.id,
          optType: 1
        })
        this.$refs.like.classList.toggle('active',this.likeStatus)
        this.$toast.success(this.likeStatus? '点赞成功': '取消点赞成功')
        // this.$refs.like.style.backgroundColor = this.likeStatus ? '#fa6d1d' : '#fff'
      }
      if (type === 2) {
        this.collectStatus = !this.collectStatus
        await changeInterviewStatus({
          id: this.$route.query.id,
          optType: 2
        })
        this.$refs.collect.classList.toggle('active',this.collectStatus)
        this.$toast.success(this.collectStatus? '收藏成功': '取消收藏成功')
        // this.$refs.collect.style.backgroundColor = this.collectStatus ? '#fa6d1d' : '#fff'
      }
    }
  },
  async created() {
    this.getDetail().then(res => {
      this.detail = res.data
      this.likeStatus = res.data.likeFlag
      this.collectStatus = res.data.collectFlag
      this.$refs.like.classList.toggle('active',this.likeStatus)
      this.$refs.collect.classList.toggle('active',this.collectStatus)
      // this.$refs.like.style.backgroundColor = this.likeStatus ? '#fa6d1d' : '#fff'
      // this.$refs.collect.style.backgroundColor = this.collectStatus ? '#fa6d1d' : '#fff'
    })
  },
}
</script>

<template>
  <div class="detail">
    <van-nav-bar
        title="面经详情"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />

    <div class="main">
      <div class="title">
        <h1>{{detail.stem}}</h1>
      </div>
      <div class="tag">
        <span class="item">{{detail.createdAt}} | </span>
        <span class="views">{{detail.views}} 浏览量 | </span>
        <span class="likes">{{detail.likeCount}} 点赞数</span>
      </div>
      <div class="author">
        <img :src="detail.avatar" alt=""/>
        <div class="name">{{detail.creator}}</div>
      </div>
      <div class="content" v-html="detail.content">
      </div>
    </div>

    <div class="button">
      <div class="like" ref="like"><van-icon name="like-o" size="20px" @click="likeCollectHandler(1)"/></div>
      <div class="collect" ref="collect"><van-icon name="star-o" size="20px" @click="likeCollectHandler(2)"/></div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.detail {
  .main {
    padding: 0 16px;
    .title h1 {
      margin: 16px 0;
    }
    .tag {
      margin: 12px 0;
      color: #999999;
      font-size: 12px;
      font-weight: 500;
    }
    .author {
      display: flex;
      align-items: center;
      margin-bottom: 16px;
      img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
      }
      .name {
        font-size: 14px;
        color: #999999;
      }
    }
    .content {
      font-size: 14px;
      line-height: 1.5;
    }
  }
  .button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 100px;
    right: 0;
    .like{
      background-colorS: #fff;
      color: #333333;
      border-radius: 50%;
      box-shadow: #cccccc 0 0 5px;
      padding: 10px;
      margin-right: 20px;
    }
    .collect{
      background: #fff;
      color: #333333;
      border-radius: 50%;
      box-shadow: #cccccc 0 0 5px;
      padding: 10px;
      margin-right: 20px;
    }
    .active{
      background-color: #fa6d1d;
      color: #fff;
    }
  }
}
</style>